<template>
	<view class="createGiftBook">
		<u--form :model="formData" :rules="rules" ref="uForm" labelWidth="200rpx">
			<u-form-item label="礼簿分类" prop="gift_book_category_id" borderBottom labelPosition="top">
				<u-radio-group v-model="formData.gift_book_category_id">
					<u-radio v-for="item in categorylist" :key="item.id" :name="item.id">
						<view class="category-item" @click="selectGiftCategoryFromCtx(item)">
							<u--image :src="item.image" width="50rpx" height="50rpx"></u--image>
							<view class="category-item-name">{{item.name}}</view>
						</view>
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="礼簿名称:" prop="name" borderBottom required>
				<u--input v-model="formData.name" placeholder="请填写礼簿名称" clearable
					:customStyle="{border:'2rpx solid #ddd'}"></u--input>
			</u-form-item>
			<template v-if="formData.gift_book_category_id === 1">
				<u-form-item label="新郎:" prop="man" borderBottom required>
					<u--input v-model="formData.man" placeholder="请填写新郎名称" clearable
						:customStyle="{border:'2rpx solid #ddd'}"></u--input>
				</u-form-item>
				<u-form-item label="新娘:" prop="man1" borderBottom required>
					<u--input v-model="formData.man1" placeholder="请填写新娘名称" clearable
						:customStyle="{border:'2rpx solid #ddd'}"></u--input>
				</u-form-item>
			</template>
			<template v-if="formData.gift_book_category_id === 2">
				<u-form-item label="宝宝:" prop="man" borderBottom required>
					<u--input v-model="formData.man" placeholder="请填写宝宝名称" clearable
						:customStyle="{border:'2rpx solid #ddd'}"></u--input>
				</u-form-item>
			</template>
			<template v-if="formData.gift_book_category_id === 3">
				<u-form-item label="寿星:" prop="man" borderBottom required>
					<u--input v-model="formData.man" placeholder="请填写寿星名称" clearable
						:customStyle="{border:'2rpx solid #ddd'}"></u--input>
				</u-form-item>
			</template>
			<template v-if="formData.gift_book_category_id === 4">
				<u-form-item label="逝者:" prop="man" borderBottom required>
					<u--input v-model="formData.man" placeholder="请填写逝者名称" clearable
						:customStyle="{border:'2rpx solid #ddd'}"></u--input>
				</u-form-item>
			</template>
			<u-form-item label="举办日期:" prop="date" borderBottom required>
				<picker mode="date" :start="startDate" @change="bindDateChange">
					<u--input v-model="formData.date" placeholder="请选择举办日期" suffixIcon="calendar-fill"
						suffixIconStyle="fontSize:50rpx" clearable
						:customStyle="{border:'2rpx solid #ddd',background:'#fff'}" disabled></u--input>
				</picker>
			</u-form-item>
			<u-form-item label="举办地点:" prop="address" borderBottom required>
				<u--textarea v-model="formData.address" placeholder="请填写举办地点" autoHeight clearable
					:customStyle="{border:'2rpx solid #ddd'}"></u--textarea>
			</u-form-item>
			<u-form-item label="备注:" prop="remark" borderBottom>
				<u--textarea v-model="formData.remark" placeholder="请填写备注" autoHeight clearable
					:customStyle="{border:'2rpx solid #ddd'}"></u--textarea>
			</u-form-item>
		</u--form>
		<u-button type="primary" text="提交" :customStyle="{marginTop:'80rpx'}" @click="submit"></u-button>
	</view>
</template>

<script>
	import {
		get,
		post
	} from '@/static/utils/request.js'
	import {
		Giftbook
	} from '@/static/utils/service.js'
	import {
		Toast
	} from '../../static/utils/utils'
	export default {
		data() {
			const time = new Date()
			const startDate = `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}`
			return {
				startDate,
				categorylist: [],
				formData: {
					gift_book_category_id: '',
					name: '',
					man: '',
					man1: '',
					date: '',
					address: '',
					remark: ''
				},
				rules: {
					'name': {
						required: true,
						message: '请填写礼簿名称',
						trigger: ['blur', 'change']
					},
					'man': {
						required: true,
						message: '请填写名称',
						trigger: ['blur', 'change']
					},
					'date': {
						required: true,
						message: '请选择举办日期',
						trigger: ['blur', 'change']
					},
					'address': {
						required: true,
						message: '请填写举办地点',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad() {
			this.getCategoryList()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			async getCategoryList() {
				const categoryRes = await get(Giftbook.category)
				this.categorylist = categoryRes.data.lists
				//默认初始值
				this.formData.gift_book_category_id = this.categorylist[0].id
			},
			selectGiftCategoryFromCtx(e) {
				this.formData.gift_book_category_id = e.id
			},
			//获取举办日期
			bindDateChange(e) {
				this.formData.date = e.detail.value
			},
			//提交
			submit() {
				this.$refs.uForm.validate().then(async () => {
					const {
						code,
						msg
					} = await post(Giftbook.add, this.formData, '创建中')
					if (code === 1) {
						Toast.success('创建成功')
						this.$refs.uForm.resetFields()
						for (let key in this.formData) {
							this.formData[key] = ''
						}
						//默认初始值
						this.formData.gift_book_category_id = this.categorylist[0].id
					} else Toast.error(msg)
				}).catch(err => {
					Toast.error('请完善信息')
				})
			}
		}
	}
</script>

<style lang="scss">
	.createGiftBook {
		padding: 0 25rpx;

		/deep/.u-radio-group {
			flex-wrap: wrap;

			.u-radio {
				margin-top: 20rpx;
				width: 25%;

				.category-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.category-item-name {
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>